<template>
<div class="box1">
    <!-- 号码 -->
    <el-form-item label="日期" label-width="120px" align="left" style="width: 94%">
        <div class="sysItem">
            <el-select v-model="obj.info" placeholder="--请选择--" style="width: 300px; margin-bottom: 6px">
                <el-option label="申请日" value="application_date"></el-option>
                <!-- <el-option label="申请年" value="public_year"></el-option> -->
                <el-option label="公开(公告)日" value="public_date"></el-option>
                <!-- <el-option label="公开月" value="public_month"></el-option> -->
                <!-- <el-option label="公开年" value="public_year"></el-option> -->
            </el-select>

            <el-select v-model="obj.sign" placeholder="--请选择--" style="width: 210px; margin-bottom: 6px; margin-left: 10px">
                <el-option label="某时间段" value="1"></el-option>
                <el-option label="某时间以前" value="2"></el-option>
                <el-option label="某时间以后" value="3"></el-option>
                <el-option label="某年(月,日)" value="4"></el-option>
            </el-select>

            <!-- <el-date-picker
          style="margin-left: 10px"
          v-model="obj.value1"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker> -->
            <div>
                <el-date-picker style="margin-left: 10px;" v-model="obj.value1" v-if="obj.sign==2 ||obj.sign ==3" type="date" placeholder="选择日期">
                </el-date-picker>
            </div>
            <div>
                <el-date-picker style="margin-left: 10px" v-if="obj.sign==1 ||obj.sign ==4" v-model="obj.value2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>

        </div>
    </el-form-item>
</div>
</template>

<script>
export default {
    name: "DateItem",
    props: {},
    watch: {
        obj: {
            handler(newV, OldV) {
                console.log("数据", newV)

                // if (newV.value1) {
                this.$emit("done", this.translateForm(newV));
                // }

            },
            deep: true,
        },
    },
    data() {
        return {
            obj: {
                info: "application_date",
                sign: "1",
                boolType: "2",
                value1: "",
                value2: "",
            },

        };
    },
    methods: {
        translateForm(newV) {
            //  let keys=["application_number","public_number","ipc_main","patent_type"]
            function formatTen(num) {
                return num > 9 ? (num + "") : ("0" + num);
            }

            function formatDate(date) {
                var date = new Date(date)
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hour = date.getHours();
                var minute = date.getMinutes();
                var second = date.getSeconds();
                return year  + formatTen(month)  + formatTen(day);
            }

            let temObj = {};
            let info = JSON.parse(JSON.stringify(newV));
            if (info.sign == 1 || info.sign == 4) {
                temObj.fieldName = info.info;
                temObj.boolType = 1
                // temObj.sign = info.sign;
                // temObj.value1 = formatDate(info.value2[0]);
                // temObj.value2 = formatDate(info.value2[1])
                
                temObj.value={
                    value1 : formatDate(info.value2[0])||"",
                    value2 : formatDate(info.value2[1])||""
                }


            } else {
                temObj.fieldName = info.info;
                // temObj.sign = info.sign;
                temObj.boolType = 1
                temObj.value = formatDate(info.value1)||"";
            }

            return temObj;
        },
    },
};
</script>

<style lang="scss" scoped>
.box1 {
    width: 100%;
    background-color: #ffffff;
    // height: 40px;

    ::v-deep .el-form-item__label {
        text-align: left;
        font-size: 12px;
        // color: red;
    }

    ::v-deep .el-popper {
        margin-top: 200px;
    }

    .sysItem {
        width: 100%;
        display: flex;
        flex-direction: row;

        ::v-deep .el-input--mini .el-input__icon {
            height: 30px;
        }

        .inputView {
            flex: 1;
            margin-left: 10px;
        }
    }
}
</style>
